<template>
  <div id="dwv">
    <div class="button-row">
      <md-button class="md-raised md-primary" value="Scroll" v-on:click="Scroll">Scroll</md-button>
      <md-button class="md-raised md-primary" value="WindowLevel" v-on:click="WindowLevel">WindowLevel</md-button>
      <md-button class="md-raised md-primary" value="ZoomAndPan" v-on:click="ZoomAndPan">ZoomAndPan</md-button>
      <!--<md-button class="md-raised md-primary" value="Sharpen" v-on:click="Sharpen">Sharpen</md-button>-->
    </div>
    <div class="layerContainer">
      <div class="dropBox"></div>
      <canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
    </div>
    <div class="legend">{{ legend }}</div>
  </div>
</template>

<script>
  // import
  // import Vue from 'vue'
  // import MdButton from 'vue-material'
  import dwv from 'dwv'

  // Vue.use(MdButton)

  // gui overrides

  // decode query
  dwv.utils.decodeQuery = dwv.utils.base.decodeQuery
  // progress
  dwv.gui.displayProgress = function () {
  }
  // window
  dwv.gui.getWindowSize = dwv.gui.base.getWindowSize
  // get element
  dwv.gui.getElement = dwv.gui.base.getElement
  // refresh element
  dwv.gui.refreshElement = dwv.gui.base.refreshElement

  export default {
    name: 'dwv',
    data: function () {
      return {
        legend: 'Powered by dwv ' + dwv.getVersion() + ' and Vue.js ' + Vue.version,
        dwvApp: ''
      }
    },
    mounted() {
      // create app
      this.dwvApp = new dwv.App()
      // initialise app
      this.dwvApp.init({
        'containerDivId': 'dwv',
        'fitToWindow': true,
        'tools': ['Scroll', 'ZoomAndPan', 'WindowLevel'],
        'isMobile': true
      })
      this.dwvApp.loadURLs(["https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm",
        "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm",
        "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323563.dcm"]);
    },
    methods: {
      onClick: function (event) {
        this.dwvApp.onChangeTool(event)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #dwv {
    font-family: Arial, Helvetica, sans-serif;
  }

  .button-row {
    text-align: center;
  }

  .legend {
    text-align: center;
    font-size: 8pt;
  }

  /* Layers */
  .layerContainer {
    position: relative;
    padding: 0;
    margin: auto;
    text-align: center;
  }

  .imageLayer {
    position: absolute;
    left: 0px;
  }

  /* drag&drop */
  .dropBox {
    border: 5px dashed #ccc;
    margin: auto;
    text-align: center;
  }

  .dropBox.hover {
    border: 5px dashed #cc0;
  }
</style>
